<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS Classification Style Demo</title>
</head>

<body>
<b style="color:pink">## cursor-规定当指向某元素之上时显示的指针类型</b>
<hr>
<br>
<style type="text/css" media="screen">
  span {border: 1px solid gray;background-color: rgba(89,123,26,0.5);display:block;color:blue;margin-bottom: 10px;}
</style>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto</span>
<span style="cursor:default">Default</span>
<span style="cursor:url("1.png")">url</span>
<span style="cursor:crosshair">crosshair 	光标呈现为十字线。</span>
<span style="cursor:pointer">pointer 	光标呈现为指示链接的指针（一只手）</span>
<span style="cursor:move">move 	此光标指示某对象可被移动。</span>
<span style="cursor:n-resize">n-resize 	此光标指示矩形框的边缘可被向上（北）移动。
</span>
<span style="cursor:s-resize">s-resize 	此光标指示矩形框的边缘可被向下移动（南）。</span>
<span style="cursor:w-resize">w-resize 	此光标指示矩形框的边缘可被向左移动（西）。</span>
<span style="cursor:e-resize">n-resize 	此光标指示矩形框的边缘可被向上（北）移动。</span>
<span style="cursor:ne-resize">ne-resize 	此光标指示矩形框的边缘可被向上及向右移动（北/东）。</span>

<span style="cursor:sw-resize">sw-resize 	此光标指示矩形框的边缘可被向下及向左移动（南/西）。</span>
<span style="cursor:nw-resize">nw-resize 	此光标指示矩形框的边缘可被向上及向左移动（北/西）。</span>
<span style="cursor:se-resize">se-resize 	此光标指示矩形框的边缘可被向下及向右移动（南/东）。</span>
<span style="cursor:text">text 	此光标指示文本。</span>
<span style="cursor:wait">wait 	此光标指示程序正忙（通常是一只表或沙漏）。</span>
<span style="cursor:help">help 	此光标指示可用的帮助（通常是一个问号或一个气球）。</span>

<br>
<br>
<hr>
<br>
<br>
<b style="color:fuchsia;background-color:pink;">## display | 设置是否及如何显示元素
</b>
<hr>
<style type="text/css">
p {display: inline;background-color: rgba(78,123,45,0.5)}
div {display: none;}   /**此元素不会被显示**/
</style>

<p>本例中的样式表把段落元素设置为内联元素。</p>   <!--/block 元素  -->
<p>而 div 元素不会显示出来！</p>              <!--//block 元素  -->
<div>div 元素的内容不会显示出来！</div>           <!--//block 元素  -->
<br>
<br>
<br>
<style type="text/css">
span.test {display: block;background-color: yellow;}
</style>
<span class="test">本例中的样式表把 span 元素设置为块级元素</span>
<span class="test">两个 span 元素之间产生了一个换行行为</span>

<br>
<br>
<br>
<b style="color:maroon"> Classfication 之 visibility Demo：</b><hr>
<style type="text/css" media="screen">
  h4.visiable {visibility: visible;border:1px solid gray;}
  h5.invisiable {visibility: hidden;border:1px solid red;}
</style>
<h4 class="visiable">这是可以看见的标题</h4>
<h5 class="invisiable">这是不可以看见的标题</h5>
<br>
<br>
<style type="text/css">
tr.coll{visibility:collapse;}  /*当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局  */
</style>
<table border="1">
  <tr>
    <td>Adams</td>
    <td>John</td>
  </tr>
  <tr class="coll">
    <td>Bush</td>
    <td>George</td>
  </tr>
</table>
</body>
<html>
